<template>
  <div class="relative-box">
    <el-upload class="upload-box" :disabled="disabled" :action="uploadUrl" :multiple="isMultiple" :limit="limit" :data="otherData" :name="filedName" :on-exceed="handleExceed" :on-success="handleSuccess" :on-error="handleError" :beforeUpload="beforeAvatarUpload" :accept="acceptFileType" :show-file-list="false" :headers="headers">
      <div class="align-center" v-if="!disabled">
        <el-button size="mini" :type="buttonType" class="f-left normal-btn" :plain="isPlain ? true : false" ref="upload">{{ btnName }}</el-button>
        <slot name="info"></slot>
      </div>
      <template v-if="isShowList">
        <div v-for="(item, index) in fileList" :key="index" class="file-item">
          <el-link type="primary" @click="uploadLoad(item[fileUrlName])">{{ item[fileTxtName] }}<i v-if="!disabled" class="el-icon-delete el-icon--right" @click.stop="deleteFile(item[fileTxtName], index)"></i></el-link>
        </div>
      </template>
    </el-upload>
  </div>
</template>

<script>
export default {
  name: 'up-load',
  props: {
    isNewwindow: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    limit: {
      type: Number,
      default: 100,
    },
    maxSize: {
      type: Number,
      default: 50,
    },
    isMultiple: {
      type: Boolean,
      default: false,
    },
    isPlain: {
      type: Boolean,
      default: true,
    },
    fileList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    otherData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    action: {
      type: String,
      default: '/frameworks/photos/upload',
    },
    prefixAction: {
      type: String,
      default: '/server-api/v1',
    },
    //限制类型
    acceptFileType: {
      type: String,
      default: '',
    },
    //限制类型
    filedName: {
      type: String,
      default: '',
    },
    //字段url名称
    fileUrlName: {
      type: String,
      default: 'url',
    },
    //字段txt名称
    fileTxtName: {
      type: String,
      default: 'name',
    },
    //按钮文字
    btnName: {
      type: String,
      default: '点击上传',
    },
    //是否展示上传后的list
    isShowList: {
      type: String,
      default: 'show',
    },
    //上传文件的按钮类型
    buttonType: {
      type: String,
      default: 'primary',
    },
    //在table单行中的话，那一行的数据
    rowObj: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      uploadUrl: this.prefixAction + this.action,
      headers: {
        token: localStorage.getItem('token'), // 获取token
      },
      loading: null,
    };
  },
  computed: {},
  mounted() {},
  methods: {
    //点击叉号回调
    handleDialogClose() {
      this.$emit('close');
    },
    //上传成功
    handleSuccess(file, fileList) {
      console.log(file);
      this.$message.success(file.message);
      this.loading.close();
      this.$emit('handleSuccess', file, fileList, this.rowObj);
    },
    //上传失败
    handleError(file, fileList) {
      this.$emit('handleError', file, fileList);
      this.$message.error(file.message);
      this.loading.close();
    },
    //文件限制
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 ${this.limit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    //移除文件
    deleteFile(fileName, index) {
      if (this.disabled) return;

      this.$confirm(`确定移除 ${fileName}？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          // this.$emit('handleRemove',index)
          this.fileList.splice(index, 1);
        })
        .catch(() => {});
    },
    //上传前判断文件大小
    beforeAvatarUpload(file) {
      var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1);
      const isLt2M = file.size / 1024 / 1024 < this.maxSize;
      if (!isLt2M) {
        this.$message({
          message: '上传文件大小不能超过' + this.maxSize + 'MB!',
          type: 'warning',
        });
      }
      if (isLt2M) {
        this.loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)',
        });
      }

      return isLt2M;
    },
    //下载
    uploadLoad(url) {
      if (this.isNewwindow) {
        window.open(url);
      } else {
        let a = document.createElement('a');
        a.style.display = 'none';
        a.href = url;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      }
    },
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.file-item{
  margin-top: 4px;
  margin-bottom: 10px;
}
</style>
